<template>
  <div>
    <div class="tab">
      <div class="back" @click="handleBack">返回</div>
      <div class="title">光与影</div>
    </div>
    <div class="ipt">
      <input
        type="text"
        placeholder="搜索"
        v-model="value"
        @keydown.enter="handleSearch"
      />
      <span class="el-icon-zoom-in"></span>
    </div>

    <div class="content">
      <MovieItem v-for="item of list" :key="item._id" :item="item"></MovieItem>
    </div>
  </div>
</template>

<script>
import MovieItem from "./components/Item.vue";
export default {
  components: {
    MovieItem,
  },
  data() {
    return {
      value: "",
      list: [],
    };
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    getRating(num) {
      var arr = [];
      for (var i = 0; i < 5; i++) {
        if (num >= 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Math.round(num * 10) / 10);
        } else {
          arr.push(0);
        }
        num = num - 2;
      }
      return arr;
    },
    handleSearch() {
      this.$http(
        `http://47.108.197.28:4000/api/search?keyword=${this.value}`
      ).then((res) => {
        res.data.res.forEach((item) => {
          item.rat = this.getRating(item.rating);
        });
        this.list = res.data.res;
      });
    },
  },
};
</script>

<style scoped>
.ipt {
  width: 100%;
  height: 80px;
  position: relative;
  background-color: #e5e5e5;
}
.ipt input {
  height: 100%;
  width: 100%;
  text-indent: 80px;
  font-size: 30px;
  background-color: initial;
  border: none;
}
.ipt span {
  font-size: 45px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.tab {
  position: relative;
  text-align: center;
  line-height: 80px;
  height: 80px;
  background-color: rgb(83, 120, 134);
  color: #fff;
}
.back {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.tab .title {
  font-size: 34px;
}
</style>